<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Ruffle Settings</title>
        <link rel="icon" type="image/png" href="images/icon32.png" />
        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="css/options.css" />
    </head>
    <body>
        <div class="header">
            <a href="https://ruffle.rs/" target="_blank">
                <img src="images/logo.svg" alt="Ruffle" data-canonical-src="images/logo.svg" class="logo" />
            </a>
            <div id="version-text">nightly YYYY-MM-DD</div>
        </div>
        <div class="options container">
            <div class="option checkbox">
                <input type="checkbox" id="ruffle_enable" />
                <label for="ruffle_enable">Play Flash content in Ruffle</label>
            </div>
            <div class="option checkbox">
                <input type="checkbox" id="show_swf_download" />
                <label for="show_swf_download">Show SWF download in context menu</label>
            </div>
            <div class="option checkbox">
                <input type="checkbox" id="autostart" />
                <label for="autostart">Autoplay Flash content (click to unmute)</label>
            </div>
            <div class="option checkbox">
                <input type="checkbox" id="swf_takeover" />
                <label for="swf_takeover">Play SWF files in browser instead of downloading</label>
            </div>
            <div id="advanced-options">Advanced Options</div>
            <div class="option checkbox">
                <input type="checkbox" id="ignore_optout" />
                <label for="ignore_optout">Play Flash content even on sites that disallow Ruffle</label>
            </div>
            <div class="option select">
                <select id="log_level">
                    <option value="error" id="log_level_error">Error</option>
                    <option value="warn" id="log_level_warn">Warning</option>
                    <option value="info" id="log_level_info">Info</option>
                    <option value="debug" id="log_level_debug">Debug</option>
                    <option value="trace" id="log_level_trace">Trace</option>
                </select>
                <label for="log_level">Log level</label>
            </div>
            <div class="option select">
                <select id="preferred_renderer">
                    <option value="" id="preferred_renderer_auto">Automatic</option>
                    <option value="webgpu">WebGPU</option>
                    <option value="wgpu-webgl">wgpu (via WebGL)</option>
                    <option value="webgl">WebGL</option>
                    <option value="canvas">Canvas2D</option>
                </select>
                <label for="preferred_renderer">Preferred renderer</label>
            </div>
            <div class="option select">
                <select id="device_font_renderer">
                    <option value="embedded" id="device_font_renderer_embedded">Embedded</option>
                    <option value="canvas">Canvas</option>
                </select>
                <label for="device_font_renderer">Device font renderer</label>
            </div>
            <div class="option number-input">
                <input type="number" id="player_version" min="1" max="32" placeholder="32" />
                <label for="player_version">Flash player version number to emulate (range 1-32)</label>
            </div>
            <div class="option number-input">
                <input type="number" id="max_execution_duration" min="1" />
                <label for="max_execution_duration">Maximum allowed ActionScript execution duration (in seconds)</label>
            </div>
            <button id="reset-settings">Reset settings</button>
        </div>
        <script src="dist/options.js"></script>
    </body>
</html>
